<template>
  <div class="about" id="about">
    <HeaderPDF></HeaderPDF>
    <h1 class="test_h1">This is an about page{{ count }}</h1>
    <div class="change_count" @click="addCount()">增加</div>
    <!-- <div v-for="item in list" :key="item.id" class="add_row">
      {{ item.text }}
    </div> -->
    <div class="parent_box">
      <!-- <div class="child_box"></div> -->
      dsubhvsudvbhsu
    </div>
    <div class="html_pdf" @click="html2PDF()">转成pdf</div>
    <BottomPDF />
  </div>
</template>
<script>
import { mapState } from "vuex";
import HeaderPDF from "../components/Header.vue";
import BottomPDF from "../components/BottomPDF.vue";
//
export default {
  computed: {
    ...mapState(["count"]),
  },
  components: {
    HeaderPDF,
    BottomPDF,
  },

  data() {
    return {
      list: [],
    };
  },
  created() {
    let str1 = "a";
    let str2 = "，";
    let str3 = ",";
    let str4 = "发";
    let str5 = "发";
    console.log(
      "unicode码校验",
      str1.charCodeAt(0),
      str2.charCodeAt(0),
      str3.charCodeAt(0),
      str4.charCodeAt(0),
      str5.charCodeAt(0)
    );
    for (let i = 0; i < 20; i++) {
      this.list.push({
        id: i,
        text: i,
      });
    }
  },
  mounted() {
    // this.documentFragment("about");
  },
  methods: {
    documentFragment(id) {
      // console.log("id", this.HeaderPDF);
      let ul = document.getElementById(id);
      let fragment = document.createDocumentFragment();
      let getWidth = null;
      while (ul.firstChild) {
        let classArry = document.getElementsByClassName(ul.firstChild);
        console.log("获取元素的宽度", ul.firstChild.clientWidth);
        getWidth += ul.firstChild.clientWidth;

        // fragment.appendChild(this.HeaderPDF);
        fragment.appendChild(ul.firstChild);
        console.log("获取第一个子节点", classArry, ul.firstChild, fragment);
      }
      console.log("测试碎片化", ul, fragment, getWidth);

      ul.appendChild(fragment);
    },

    // 修改count
    addCount() {
      console.log("vue-----------------", this.prototype);
      this.$exception.show("异常处理");
      // console.log(this.$toast);
      this.$exception.confrom("确定");
      this.$store.commit("SET_COUNT", 1);
    },
    html2PDF() {
      // 转化页面
      console.log("页面转化");
      this.$getpdf("about", "about页面");
    },
  },
};
</script>
<style scoped>
.parent_box {
  /* position: relative; */
  width: 400px;
  height: 400px;
  border: 1px solid red;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.child_box {
  width: 100px;
  height: 100px;
  border: 1px solid aqua;
  /* position: absolute;
  margin: auto;
  left: 0;
  top: 0;
  bottom: 0;
  transfrom:translate()
  right: 0; */
  display: inline-block;
}
.change_count {
  border: 1px solid red;
  font-size: 1.5rem;
  color: aqua;
  width: 5rem;
  height: 2rem;
}
.html_pdf {
  width: 40px;
  height: 20px;
  border: 1px solid red;
  font-size: 16px;
  color: aqua;
}
.add_row {
  height: 40px;
  border: 1px solid aqua;
  color: blue;
  font-size: 18px;
}
.about {
  position: relative;
  width: 100%;
  height: 100vh;
  border: 1px solid red;
}
</style>
